<!-- 更换车辆 -->
<!-- eslint-disable vue/valid-v-for -->
<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="更换车辆"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <div class="my-lic"
      >原安装车辆<p>{{ car.licenseNo || '-' }}</p></div
    >
    <div class="page-item">安装人：{{ car.installerStr || '-' }}</div>
    <div class="page-item">安装时间：{{ car.installationTime }}</div>
    <page-form :model="form" layout="vertical" div="true" class="page-form" ref="formRef">
      <page-form-item
        field="licenseNo"
        label="更换车辆"
        size="1/2"
        required
        :rules="[{ required: true, message: '请完善必填项信息', trigger: 'change' }]"
      >
        <a-select
          v-model="form.licenseNo"
          :loading="vinloading"
          placeholder="请选择"
          allow-search
          @search="handleSearch"
          :filter-option="false"
        >
          <a-option v-for="item of carList" :value="item.licenseNo">{{ item.licenseNo }}</a-option>
        </a-select>
      </page-form-item>
    </page-form>
  </a-modal>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getCar, findUserInfo, vehicleBind, vehicleDetail } from '@/api/asset/vehicle'

  // 获取当前用户
  const orgIdList = ref([])
  const tenantId = ref(null)
  const getUserInfo = () => {
    findUserInfo().then((res) => {
      orgIdList.value.push(res.result.epId)
      tenantId.value = res.result.tenantId
      handleSearch()
    })
  }

  // 获取 安装车辆
  const carList = ref([])
  const vinloading = ref(false)
  const handleSearch = (e) => {
    vinloading.value = true
    getCar({ licenseNoLike: e, tenantId: tenantId.value, pageNumber: 1, pageSize: 10 }).then((res) => {
      carList.value = res.result
      vinloading.value = false
    })
  }

  // 获取车辆详情
  const car = ref({})
  const getDetail = (id) => {
    vehicleDetail({ id: id }).then((res) => {
      car.value = res.result
    })
  }

  const form = ref({})
  const showModal = ref(false)

  const show = (id) => {
    form.value.id = id
    getDetail(id)
    getUserInfo()
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
  }

  const emit = defineEmits(['save'])
  const formRef = ref()
  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }
  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          form.value.transformType = 2
          vehicleBind({ ...form.value })
            .then((res) => {
              console.log(res)
              Message.success(res.message)
              emit('save')
              showModal.value = false
              done()
              resolve()
            })
            .catch((err) => {
              console.log(err)
              // Message.error(err.message)
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })

  onMounted(() => {})
</script>

<style lang="less" scoped>
  .page-form {
    margin: 0;

    // padding: 0 60px;
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 !important;
    }
  }
  .my-lic {
    font-size: 12px;
    p {
      font-size: 24px;
      font-weight: 600;
      margin-top: 4px;
    }
  }
  .page-item {
    margin: 20px 0 !important;
  }
</style>
